<md-dialog class="event-form-dialog" aria-label="New Message">
    <form name="eventForm" class="md-inline-form" novalidate>
        <md-toolbar class="md-accent md-hue-2">
            <div class="md-toolbar-tools" layout="row" layout-align="space-between center">
                <span class="title">{{vm.dialogTitle}}</span>
                <md-button class="md-icon-button" ng-click="vm.closeDialog()" aria-label="Close dialog" translate
                           translate-attr-aria-label="CALENDAR.CLOSE_DIALOG">
                    <md-icon md-font-icon="icon-close"></md-icon>
                </md-button>
            </div>
        </md-toolbar>

        <md-dialog-content ms-scroll>
            <md-input-container class="md-block">
                <label translate="CALENDAR.TITLE">Title</label>
                <input name="title" ng-model="vm.calendarEvent.title" required>
                <div ng-messages="eventForm.title.$error" ng-show="eventForm.title.$touched" role="alert">
                    <div ng-message="required">
                        <span translate="CALENDAR.ERRORS.TITLE_REQUIRED">Title field is required</span>
                    </div>
                </div>
            </md-input-container>

            <md-list class="all-day">
                <md-list-item>
                    <p translate="CALENDAR.ALL_DAY">All Day</p>
                    <md-switch class="md-secondary" ng-model="vm.calendarEvent.allday" aria-label="All day" translate
                               translate-attr-aria-label="CALENDAR.ALL_DAY"></md-switch>
                </md-list-item>
            </md-list>

            <div layout="row" class="date-row">
                <md-datepicker ng-model="vm.calendarEvent.start" md-placeholder="Start Date"></md-datepicker>

                <md-input-container flex md-no-float>
                    <input ng-model="vm.calendarEvent.startTime" placeholder="Start Time" translate
                           translate-attr-placeholder="CALENDAR.START_TIME">
                </md-input-container>
            </div>

            <div layout="row" class="date-row">
                <md-datepicker ng-model="vm.calendarEvent.end" md-placeholder="End Date"></md-datepicker>

                <md-input-container flex md-no-float>
                    <input ng-model="vm.calendarEvent.endTime" placeholder="End Time" translate
                           translate-attr-placeholder="CALENDAR.END_TIME">
                </md-input-container>
            </div>

            <md-input-container class="md-block" flex>
                <label translate="CALENDAR.REPEAT">Repeat</label>
                <input ng-model="vm.calendarEvent.repeat">
            </md-input-container>

            <md-input-container class="md-block" flex>
                <label translate="CALENDAR.LOCATION">Location</label>
                <input ng-model="vm.calendarEvent.location">
            </md-input-container>

            <div class="notifications" layout="column">
                <div class="title" translate="CALENDAR.NOTIFICATIONS">Notifications</div>

                <md-select ng-model="notification" placeholder="Notification"
                           ng-repeat="notification in vm.calendarEvent.notifications">
                    <md-option ng-repeat="opt in vm.notifications" value="{{opt}}">{{opt}}</md-option>
                </md-select>

                <md-button aria-label="+ Add Another Notification" translate="CALENDAR.ADD_NOTIFICATION"
                           translate-attr-aria-label="CALENDAR.ADD_NOTIFICATION">
                    + Add Another Notification
                </md-button>
            </div>

            <md-input-container flex class="md-block textarea-container">
                <label translate="CALENDAR.NOTES">Notes</label>
                <textarea ng-model="vm.task.notes" md-maxlength="250"></textarea>
            </md-input-container>
        </md-dialog-content>

        <md-dialog-actions layout="row" layout-align="space-between center">
            <md-button ng-click="vm.saveEvent()" class="save-button md-accent md-raised" aria-label="SAVE"
                       ng-disabled="eventForm.$invalid || eventForm.$pristine"
                       translate="CALENDAR.SAVE"
                       translate-attr-aria-label="CALENDAR.SAVE">
                SAVE
            </md-button>

            <md-button class="md-icon-button" aria-label="Delete" translate translate-attr-aria-label="CALENDAR.DELETE">
                <md-icon md-font-icon="icon-delete"></md-icon>
                <md-tooltip><span translate="CALENDAR.DELETE">Delete</span></md-tooltip>
            </md-button>
        </md-dialog-actions>
    </form>
</md-dialog>